<template>
	<view class="charts">
		<f2 :init="initChart" :charts="chartCopyData" />
	</view>
</template>

<script>
	import f2 from '@/components/i-uni-f2/f2.vue'
	export default {
		name: 'ChartRadarToo',
		props: {
			chartData: Object
		},
		data() {
			return {
			};
		},
		components: {
		    f2
		},
		created() {
		},
		computed: {
			chartCopyData() {
				return this.chartData.data;
			}
		},
		watch:{
			chartData(n,o){
				console.log(n,o,'watch')
				
			}
		},
		methods: {
			initChart(F2, config) {
				const chart = new F2.Chart(config)
			    chart.source(this.chartData.data);
			    chart.tooltip({
			    	background: {
			    	  radius: 4,
			    	  fill: '#fcfcfc',
			    	  padding: [ 6, 10 ],
			    	  shadowColor: 'rgba(0, 0, 0, 0.2)',
			    	  shadowBlur: 20
			    	},
			    	titleStyle: {
			    	  fontSize: 14,
			    	  fill: '#555555',
			    	  textAlign: 'start',
			    	  textBaseline: 'top'
			    	},
			    	nameStyle: {
			    	  fontSize: 14,
			    	  fill: '#555555',
			    	  textAlign: 'start',
			    	  textBaseline: 'middle'
			    	},
			    	valueStyle: {
			    	  fontSize: 14,
			    	  fill: '#555555',
			    	  textAlign: 'start',
			    	  textBaseline: 'middle'
			    	},
			    	onShow:(obj) => {
			    		obj.items[0].name = obj.items[0].origin[this.chartData.x];
			    		obj.items[0].value += this.chartData.unit;
			    	}
			    });
			    chart.coord('polar');
			    chart.scale(this.chartData.y, {
			    	min: 0
			    });
			    chart.axis(this.chartData.y, {
			      grid: {
			        lineDash: null,
			    	stroke: '#999999'
			      },
			      label: null,
			      line: null
			    });
			    chart.axis(this.chartData.x, {
			      grid: null,
				  label: (text) => {
				      const cfg = {
						  fill: '#555555',
						  fontSize: 12
				      };
					  if(text.length>6){
						  cfg.text = text.slice(0,5) + '...'
					  }
				      return cfg;
				    }
			    });
			    chart.line().position(this.chartData.x + '*' + this.chartData.y).color(this.chartData.color);
			    chart.point().position(this.chartData.x + '*' + this.chartData.y).color(this.chartData.color);
			    chart.render();
			    return chart
			}
		}
	}
</script>

<style scoped>
	.charts {
		width: 100%;
		height: 100%;
	}
</style>
